{% extends 'admin/base.html' %}
{% load custom_filters staticfiles %}
{% block content %}
    <style>
        .cell {
            text-align: center;
        }

        .el-pagination {
            text-align: right;
        }

        .el-drawer__body .cell button {
            margin-bottom: 4px;
        }

        div[class="el-input"] {
            width: 220px;
        }

        .el-drawer.rtl {
            overflow: scroll;
        }
    </style>
    <div id="app">
        <el-row>
            <el-button type="danger" @click="deletes"><i class="fa fa-trash"></i>&nbsp;删除</el-button>
            <div style="float: right">
                <el-button plain icon="el-icon-refresh-right"></el-button>
                <el-input v-model="search" placeholder="请输入书名"></el-input>
                <el-button type="primary" @click="searchKey">查找</el-button>
            </div>
        </el-row>
        <br>

        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="小说封面" width="100">
                <template slot-scope="scope">
                    {#    <img :src="scope.row.novel_img" width="100%" height="50" :alt="scope.row.novel_name"/>#}
                    <el-image style="width: 100%; height: 50px" :src="scope.row.novel_img" fit="scale-down"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="uuid" label="小说编号" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="novel_name" label="小说书名" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="categories" label="所属分类" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="novel_author" label="小说作者" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="chapter_number" label="章节数量" width="80"></el-table-column>
            <el-table-column prop="novel_state" label="小说状态" width="80"></el-table-column>
            <el-table-column prop="update_time" label="修改时间" width="180"></el-table-column>
            <el-table-column label="小说属性" width="180">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.novel_is_focus" active-text="焦图" inactive-text="关闭" @change="handNovel_is_focus(scope.$index,scope.row)"></el-switch>
                    <el-switch v-model="scope.row.novel_is_recommend" active-text="推荐" inactive-text="关闭"
                               @change="handNovel_is_recommend(scope.$index,scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="other" label="其他操作" fixed="right">
                <template slot-scope="scope">
                    <el-drawer title="所有章节" :visible.sync="drawer" :with-header="false">
                        <el-table :data="gridChapter">
                            <el-table-column property="chapter" label="章节" width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column property="author" label="作者" width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column label="阅读权限" show-overflow-tooltip>
                                <template slot-scope="scopeIs_pay">
                                    <el-switch v-model="scopeIs_pay.row.is_pay" active-text="付费" inactive-text="免费"
                                               @change="is_payEdit(scopeIs_pay.$index,scopeIs_pay.row)"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column property="handle" label="操作">
                                <template slot-scope="chapter_scope">
                                    <el-button size="mini" @click="web_show(chapter_scope.row.uuid)">预览</el-button>
                                    <br/>
                                    <el-button size="mini" type="danger" @click="chapterDel(chapter_scope.$index, chapter_scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-drawer>
                    <el-button size="mini" @click="chapter_list(scope.$index, scope.row)">章节</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br/>
        <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page @current-change="current_change"
                       :current-page="currentPage"></el-pagination>

        <!--修改-->
        <el-dialog title="修改小说信息" :visible.sync="dialogEditFormVisible">
            <el-form :model="formEdit">
                <el-form-item label="小说书名" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说作者" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说类型" :label-width="formLabelWidth">
                    <el-switch v-model="formEdit.novel_state" active-text="完结" inactive-text="连载中"></el-switch>
                </el-form-item>
                <el-form-item label="小说阅读" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_click" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说封面" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_img" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说专区" :label-width="formLabelWidth">
                    <el-select v-model="formEdit.novel_zone" placeholder="请选择专区">
                        <el-option v-for="item in novel_zoneOptions" :key="item.value" :label="item.label" :value="item.value">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="阅读积分" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.integral" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说关键词" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_key" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说简介" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说点赞" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_praise" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说喜欢" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_love" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小说字数" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.novel_words" autocomplete="off" @input.native="changeCode"></el-input>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm">取 消</el-button>
                <el-button type="primary" @click="submitEditForm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
    <script src="{% static 'js/public.js' %}" type="text/javascript"></script>
    <script>
        var M = {
            data() {
                return {
                    search: '{{ request.GET.search }}',
                    drawer: false,
                    total: {{ page.num_pages }}0,//默认数据总数
                    currentPage: {{ novelList.number }},//默认开始页面
                    tableData: [
                        {% for novel in novelList.object_list %}
                            {
                                uuid: "{{ novel.uuid }}",
                                novel_img: "{{ novel.novel_img }}",
                                novel_name: "{{ novel.novel_name }}",
                                categories: "{{ novel.categories.column_name }}",
                                novel_author: "{{ novel.novel_author }}",
                                chapter_number: "{{ novel.chapter_novel.count }}",
                                novel_state: "{{ novel.novel_state|is_end }}",
                                update_time: "{{ novel.update_time }}",
                                novel_is_focus: "{{ novel.novel_is_focus }}",
                                novel_is_recommend: "{{ novel.novel_is_recommend }}"
                            },
                        {% endfor %}
                    ],
                    gridChapter: [],
                    formEdit: {},
                    dialogEditFormVisible: false,
                    formLabelWidth: '120px',
                    novel_zoneOptions: [],
                }
            }
            , methods: {
                handleEdit: function (index, row) {
                    result = submit_ajax(this, 'GET', {"uuid": row.uuid}, "{% url 'admin_system:novelEdit' %}", false, false);
                    if (result.code === 0) {
                        this.dialogEditFormVisible = true;
                        this.formEdit = result.data;
                    } else {
                        that.$message.error('警告：获取数据异常！[' + result.msg + ']');
                    }
                }
                ,
                handleDelete: function (index, row) {
                    Delete(this, index, row);
                },
                current_change: function (currentPage) {
                    window.location.href = '?page=' + currentPage + '&search=' + this.search
                },
                deletes: function () {
                    var uuid_list = [];
                    $.each(this.multipleSelection, function (i, v) {
                        uuid_list.push(v.uuid)
                    });
                    if (uuid_list.length === 0) {
                        this.$message({
                            message: '未检测到选中数据！',
                            type: 'warning'
                        });
                        return
                    }
                    Deletes(this, uuid_list)
                },
                handleSelectionChange: function (val) {
                    this.multipleSelection = val;
                },
                chapter_list: function (index, row) {
                    var that = this;
                    $.ajax({
                        url: "{% url 'admin_system:chapterGet' %}",
                        type: 'GET',
                        data: {"uuid": row.uuid},
                        dataType: 'json',
                        headers: {'X-CSRFToken': getCookie('csrftoken')},
                        success: function (response) {
                            if (response.code === 0) {
                                that.drawer = true;
                                that.gridChapter = response.data_list;
                            } else {
                                that.gridChapter = [];
                                that.$message.error('警告：获取数据异常！[' + response.msg + ']');
                            }
                        }, error: function (err) {
                            that.gridChapter = [];
                            that.$message.error('错误：获取数据失败！');
                        }
                    })
                },
                chapterDel: function (index, row) {
                    this.$confirm('此操作将永久删除该章节, 是否继续?', '谨慎提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        result = submit_ajax(this, 'DELETE', {"uuid": row.uuid}, "{% url 'admin_system:chapterGet' %}", false, false);
                        if (result.code === 0) {
                            this.gridChapter.splice(index, 1);
                            this.$message({message: result.msg, type: 'success'});
                        } else {
                            this.$message.error('警告：移除数据异常！[' + result.msg + ']');
                        }
                    }).catch(() => {

                    });
                },
                searchKey: function () {
                    if (this.search === '') {
                        this.$message.error('请输入查找值...');
                        return NaN
                    }
                    window.location.href = '{% url 'admin_system:bookList' %}?search=' + this.search;
                },
                resetForm: function () {
                    this.dialogEditFormVisible = false;
                },
                submitEditForm: function () {
                    // 提交修改数据
                    result = submit_ajax(this, 'POST', this.formEdit, "{% url 'admin_system:novelEdit' %}", false, false);
                    if (result.code === 0) {
                        this.dialogEditFormVisible = false;
                        this.$message({
                            message: '更新成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('警告：更新数据异常！[' + result.msg + ']');
                    }
                },
                changeCode: function () {
                    this.$nextTick(() => {
                        if (this.formEdit.novel_words !== null) {
                            this.formEdit.novel_words = this.formEdit.novel_words.replace(/[^\d]/g, '')
                        }
                    })
                },
                // 修改章节权限
                is_payEdit(index, row) {
                    submit_ajax(this, 'GET', {'uuid': row.uuid, 'is_pay': row.is_pay}, '{% url 'admin_system:chapterIsPay' %}', false);
                },
                handNovel_is_recommend(index, row) {
                    submit_ajax(this, 'GET', {'uuid': row.uuid, 'novel_is_recommend': row.novel_is_recommend}, '{% url 'admin_system:novelShow' %}', false);
                },
                handNovel_is_focus(index, row) {
                    submit_ajax(this, 'POST', {'uuid': row.uuid, 'novel_is_focus': row.novel_is_focus}, '{% url 'admin_system:novelShow' %}', false);
                },
                web_show(uuid) {
                    window.open("/detail/"+uuid+".jsp")
                }
            }, mounted() {
                var all = Array();
                for (j = 0, len = this.tableData.length; j < len; j++) {
                    x = this.tableData[j];
                    x['novel_is_focus'] = x['novel_is_focus'] === 'True' ? true : false;
                    x['novel_is_recommend'] = x['novel_is_recommend'] === 'True' ? true : false;
                    all.push(x)
                }
                this.tableData = all;
            }

        };
        var Ctor = Vue.extend(M);
        new Ctor().$mount('#app');
    </script>
{% endblock %}